<template>
  <div class="task">
    <!-- 第一行表单筛选 -->
    <div class="bg_frist">
      <!-- 第一列 -->
      <el-row :gutter="20">
        <el-col :span="8">
          <div class=" bg-purple">
            <el-form label-width="80px">
              <el-form-item size="samll" label="任务编号:" prop="">
                <el-input placeholder="请输入任务编号" style="width: 250px;" />
              </el-form-item>
            </el-form>
            <el-form label-width="80px">
              <el-form-item size="samll" label="车牌号码:" prop="">
                <el-input placeholder="请输入车牌号码" style="width: 250px;" />
              </el-form-item>
            </el-form>
          </div>
        </el-col>
        <!-- 第二列 -->
        <el-col :span="8">
          <div class="bg-purple">
            <el-form label-width="80px">
              <el-form-item size="samll" style="white-space: nowrap" label="任务分配状态:">
                <el-select v-model="selectedOption" placeholder="请选择" style="width: 250px;">
                  <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
              </el-form-item>
            </el-form>
            <el-form label-width="80px">
              <el-form-item size="samll" label="起始地机构:">
                <el-select v-model="selectedOption" placeholder="请选择起始地机构" style="width: 250px;">
                  <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
              </el-form-item>
            </el-form>
          </div>
        </el-col>
        <!-- 第三列 -->
        <el-col :span="8">
          <div class="bg-purple">
            <el-form label-width="80px">
              <el-form-item size="samll" style="white-space: nowrap" label="满载状态:">
                <el-select v-model="selectedOption" placeholder="请选择" style="width: 250px;">
                  <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
              </el-form-item>
            </el-form>
            <el-form label-width="80px">
              <el-form-item size="samll" label="目的地机构:">
                <el-select v-model="selectedOption" placeholder="请选择目的地机构" style="width: 250px;">
                  <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
              </el-form-item>
            </el-form>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-button size="medium" type="primary">搜索</el-button>
        <el-button size="medium">重置</el-button>
      </el-row>
    </div>
    <!-- 第二行状态选择 -->
    <div class="bg_two">
      <el-row>
        <el-col :span="3"><div class="state active">全部<span>124</span></div></el-col>
        <el-col :span="3"><div class="state">待提货<span>18</span></div></el-col>
        <el-col :span="3"><div class="state">进行中<span>2</span></div></el-col>
        <el-col :span="3"><div class="state">已完成<span>31</span></div></el-col>
        <el-col :span="3"><div class="state">已取消<span>73</span></div></el-col>
      </el-row>
    </div>
    <!-- 第三行数据展示 -->
    <div class="bg_three">
      <el-table class="my_table" :data="tableData" stripe style="width: 100%">
        <el-table-column prop="no" label="序号" />
        <el-table-column prop="date" width="120px" label="运输任务编号" />
        <el-table-column prop="type" label="车牌号码" />
        <el-table-column prop="num" label="起始地" />
        <el-table-column prop="weight" label="目的地" />
        <el-table-column prop="volume" width="120px" label="运输任务状态" />
        <el-table-column prop="volume" width="120px" label="车辆装载状态" />
        <el-table-column prop="long" width="120px" label="任务分配状态" />
        <el-table-column prop="wide" width="120px" label="计划发车时间" />
        <el-table-column prop="tall" width="120px" label="实际发车时间" />
        <el-table-column prop="tall" label="更新时间" />
        <el-table-column width="160" fixed="right" label="操作">
          <template :slot-scope="scope">
            <el-button style="font-size:12px;color:#409eff" type="text" size="small">编辑</el-button>
            <span class="scopespan">|</span>
            <el-button style="font-size:12px;color:#f56c6c" type="text" size="small">删除</el-button>
            <span class="scopespan">|</span>
            <el-button style="font-size:12px;color:#409eff" type="text" size="small">手动调整</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 底部分页功能 -->
      <div class="block">
        <el-pagination :small="true" layout="total, sizes, prev, pager, next, jumper" />
      </div>
    </div>
  </div>
</template>
<script>
export default {
  components: {},
  data() {
    return {
      // 假数据
      tableData: [{
        no: 113730,
        type: '川A32222',
        num: '成都分拣中心',
        weight: '金牛区营业部',
        volume: '待取货',
        long: '已分配',
        zip: 200333
      }],
      options: [],
      selectedOption: '' // 选中的选项值
    }
  },
  methods: {
    // 定义每一行高度
    setRowHeight() {
      return 'row-height' // row-height 可以根据实际需要设置
    }
  }
}
</script>

<style lang="scss" scoped>
.task{
  margin-top:10px;
  margin-left: 25px;
  margin-right: 10px;
}
// 筛选
.bg_frist{
  height: 200px;
  background-color: #fff;
  padding-top:20px ;
  padding-left: 20px;
}
::v-deep .el-form-item__label{
  font-size: 12px;
  font-weight: 400;
  color: #20232a;
}
.bg-purple{
  margin-right: 20px;
  .el-button{
  padding: 12px 32px;
  margin-left: 10px;
}
}

/* 状态选择 */
.bg_two{
  margin-top: 20px;
  background-color: #fff;
  .state{
    height: 48px;
    line-height: 48px;
    text-align: center;
    color: #333;
    font-size: 14px;
    cursor: pointer;
    span{
      font-weight: 700;
      padding-left: 5px;
    }
  }
  .active{
     background-color: #ffeeeb;
     color: #e15536;
  }
}
// 数据展示
.bg_three{
  margin-top: 20px;
  padding: 28px;
  background-color: #fff;
  height: 500px;
  .my_table{
    border: 1px solid #ebeef5 ;
    color: 1px solid #20232a;
  }
.scopespan{
  color: #ccc;
  font-size: 12px;
  padding: 0 5px;
}
.button-container {
  display: flex;
  justify-content: space-between;
}
}
.date_table{
  font-size: 12px;
}
// 底部分页
.block {
  text-align: center;
  margin-top:15px
}
</style>
